$(()=>{

	var boot = new Boot();
	boot.init();

})


function Boot(){
	this.init=()=>{
		var banner = new Banner();
	 	banner.init();
		var item = new Item();
		item.init();
	}
}


//轮播
function Banner(){
	var len ,circle;
	this.init = ()=>{
		this.load_server_data();
	};
	this.render = (data)=>{
		console.log(data);
		JSON.parse(data).result.forEach(element => {
			console.log("banner item = "+element)
			$(".index-content .banner .imgs").append("<img src="+element.url+" />");
			$(".index-content .banner .banner-circle ul").append('<li></li>')
		});
		len = $(".banner img").length;
		circle = $(".banner-circle").width();
		this.task();
	};
	this.load_server_data=()=>{
		utils_load_banner(this.render);
	};
	this.task=()=>{
		$(".banner img").eq(0).show().siblings("img").hide();
		$(".banner-circle").css('margin-left',-(circle*0.5)+'px');
		let index = 0;
		setInterval(()=>{
			index++;
			this.play(index);
		},3000);
	};
	this.play=(index)=>{
		if(index == len){index = 0};
		$(".banner img").eq(index).show().siblings("img").hide();
 		$(".banner-circle ul li").removeClass().eq(index).addClass("selected");
	};
}



//功能区
function Item(){
	
	this.init = ()=>{
		this.load_server_data();
		this.bind();
	};
	
	this.render = (data)=>{
		console.log(data);
		JSON.parse(data).forEach((element,index) =>{
			let item_html = "<div class='category' id=cat_"+index+"> <i class='"+element.cls+"'></i><label>"+element.name+"</label></div>";
			console.log(item_html);
			$(".index-content .index-category").append(item_html);
		})
		
	};
	this.load_server_data=()=>{
		utils_load_item(this.render);
	};
	this.bind=()=>{

		$(document).on("click", ".index-content .index-category .category i", function(ev){ 
			var curCls = $(this).attr("class");
			var detailList = new DetaiList(curCls);
			detailList.init();
		});

	}
}


//详情列表
function DetaiList(pCls){
	this.pCls = pCls;
	this.init = ()=>{
		this.load_server_data();
	};
	this.render = (data)=>{
		$(".index-content .index-main ul").html("");
		console.log(data);
		let detail_html = "";
		JSON.parse(data).forEach((element,index) =>{
			
			detail_html  += "<li class=lists>";
			detail_html += "<i class='list-icon "+this.pCls+"' ></i>";
			detail_html += "<span class=list-text>"+element+"</span>";
			detail_html += "<i class='es ht-arw-top list-tip'></i>";
			detail_html += "</li>";
			
			
		});
		$(".index-content .index-main ul").append(detail_html);
	};
	this.load_server_data=()=>{
		utils_load_detail(this.render);
	};
}